
<!--话术管理，大体逻辑、函数、变量与用户管理页面中相同-->

<template>
  <div>
    <el-card id="search">
      <el-input v-model="searchModel.keyword" placeholder="请输入关键字"></el-input>
      <el-button type="success">查询</el-button>
      <el-button type="primary" @click="openEditUI(null)">新增</el-button>
    </el-card>

    <el-card style="margin-top: 30px">
      <!--      话术表格-->
      <el-table :data="scriptList" style="width: 100%">
        <el-table-column prop="No" label="序号" width="100" align="center" header-align="center"></el-table-column>
        <el-table-column prop="college" label="学院" width="180" align="center" header-align="center"></el-table-column>
        <el-table-column prop="keyword" label="关键字" width="150" align="center" header-align="center"></el-table-column>
        <el-table-column prop="content" label="内容" width="500" align="center" header-align="center"></el-table-column>
        <el-table-column label="操作" width="150" align="center" header-align="center">
          <template slot-scope="scope">
            <el-button type="default" size="small" @click="openEditUI(scope.row)">修改</el-button>
            <el-button type="danger" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--      分页器和页码选择器-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchModel.pageNo"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="searchModel.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 15px">
      </el-pagination>
    </el-card>

    <!--    弹窗-->
    <el-dialog :visible.sync="dialogFormVisible" :title="title" center @close="closeEditUI">
      <el-form :model="scriptForm">
        <el-form-item label="关键字" label-width="100px">
          <el-input v-model="scriptForm.keyword" autocomplete="off" placeholder="请输入关键字"/>
        </el-form-item>
        <el-form-item label="内容" label-width="100px">
          <el-input v-model="scriptForm.content" autocomplete="off" type="textarea" autosize="{ minRows: 4, maxRows: 10 }" placeholder="请输入话术内容"/>
        </el-form-item>
      </el-form>

      <template #footer>
          <span  class="dialog-footer">
          <el-button type="primary" @click="dialogFormVisible = false" >
            确定
          </el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </span>
      </template>

    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "script",
  data() {
    return{

      title: '新增话术',
      dialogFormVisible: false,

      total: 0,
      searchModel: {
        keyword: '',
        pageNo: 1,
        pageSize: 10,
      },

      scriptList: [
        {
          college: '计算机学院',
          keyword: '学费',
          content: '学费是多少？',
        },
      ],
      scriptForm: {
        keyword: '',
        content: '',
      },
    }
  },
  methods: {
    handleSizeChange(val) {

    },
    handleCurrentChange(val) {

    },
    openEditUI(val) {
      if (val === null){
        this.title = '新增话术';
      } else {
        this.title = '修改话术';
        this.scriptForm = {
          keyword: val.keyword,
          content: val.content,
        }
      }
      this.dialogFormVisible = true;
    },
    closeEditUI() {
      this.dialogFormVisible = false;
      this.scriptForm = {
        keyword: '',
        content: '',
      };
    },
  },
}
</script>

<style scoped>
#search .el-input{
  width: 200px;
  margin-right: 20px;
}
</style>
